<template>
  <div>
    <el-button @click="settFormVisible = !settFormVisible">成本校对</el-button>
    <el-dialog
      title="成本校对"
      :visible.sync="settFormVisible"
      class="main_dialog dialog900"
      @closed="closed"
    >
      <el-form
        :inline="true"
        :model="form"
        :rules="rules"
        class="demo-form-inline"
        ref="userListFrom1"
        label-width="80"
        key="userListFrom1"
      >
        <div class="dialog_container">
          <div class="top">
            <el-form-item label="配送日期" prop="sendTime">
              <el-date-picker
                v-model="sendTime"
                type="daterange"
                class="time220"
                :editable="false"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :clearable="true"
                :picker-options="dateOption"
              />
            </el-form-item>
          </div>
          <div class="middle">
            <el-form-item label="商品:" prop="goods_spu_id">
              <change-goods-input
                ref="changeGoodsInput"
                @clear="
                  () => {
                    this.form.goods_spu_id = '';
                  }
                "
                @sendValue="getData"
              ></change-goods-input>
            </el-form-item>
            <el-form-item label="成本单价:" prop="price">
              <el-input
                v-model.trim="form.price"
                ref="focusw2"
                placeholder="成本单价"
                clearable
                class="wid140"
                @keyup.native.enter="handlePriceEnter"
              ></el-input>
            </el-form-item>
            <div class="marginBottom10">
              <el-button type="primary" @click="handleAdd"
                >确认(回车)</el-button
              >
              <el-button
                class="reset marginLeft5"
                @click="handleRest"
                type="info"
                >重置</el-button
              >
            </div>
          </div>
          <div class="main_table marginTop0">
            <el-table
              ref="multipleTable1"
              v-loading="listLoading"
              :data="table_list"
              element-loading-text="加载中"
              fit
              highlight-current-row
              key="multipleTable1"
            >
              <el-table-column label="序号" width="80">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column
                label="商品名称"
                prop="name"
                class-name="main_hei"
              />
              <el-table-column
                label="成本单价"
                prop="price"
                class-name="main_hei"
              />
              <el-table-column
                label="操作"
                fixed="right"
                width="110"
                prop=""
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  <el-link type="danger" @click="handleDelete(scope)"
                    >删除</el-link
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-repeatClick>取消</el-button>
        <el-button
          type="primary"
          :disabled="table_list.length == 0"
          @click="handleEstimate"
          v-repeatClick
          :loading="btn_loading"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dateOption from "@/options/dateOption";
import { order_saveCost } from "@/api/report/index";
export default {
  name: "",
  data() {
    return {
      dateOption,
      settFormVisible: false,
      form: {
        goods_spu_id: "",
        name: "",
        price: null,
      },
      rules: {
        goods_spu_id: [
          {
            required: true,
            message: "商品不能为空",
            trigger: ["change"],
          },
        ],
        price: [
          {
            required: true,
            message: "成本单价不能为空",
            trigger: ["change"],
          },
          {
            pattern: /^(\d+\.?)?\d{0,2}$/,
            message: "请输入整数和小数",
            trigger: "blur",
          },
        ],
      },
      table_list: [],
      sendTime: [],
      listLoading: false,
      btn_loading: false,
    };
  },
  methods: {
    getData(val) {
      this.form.goods_spu_id = val.id;
      this.form.name = val.name;
      this.$refs["focusw2"].focus();
    },
    handleAdd() {
      return new Promise((resolve, reject) => {
        this.$refs["userListFrom1"].validate(async (valid) => {
          if (valid) {
            let c = null;
            let goods_spu_id = this.form.goods_spu_id;
            let is_exit = this.table_list.some((e, index, arry) => {
              c = index;
              return arry[c].goods_spu_id == goods_spu_id;
            });
            if (is_exit) {
              this.table_list[c].price = JSON.parse(
                JSON.stringify(this.form.price)
              );
              this.handleRest();
            } else {
              let form = Object.assign({}, this.form);
              this.table_list.push(form);
              this.handleRest();
            }
            this.$refs["changeGoodsInput"].name = "";
            this.$refs["userListFrom1"].resetFields();
            resolve(1);
          } else {
            this.$refs["changeGoodsInput"].name = "";
            resolve(0);
          }
        });
      });
    },
    handlePriceEnter() {
      if (!this.form.price && this.form.price !== 0) {
        return;
      }
      this.handleAdd().then((res) => {
        if (res) {
          this.$refs["changeGoodsInput"].focus();
        }
      });
    },

    handleRest() {
      this.form.goods_spu_id = "";
      this.form.price = null;
      this.form.name = null;
      this.$refs["changeGoodsInput"].name = "";
      this.$refs["userListFrom1"].resetFields();
    },
    handleDelete(scope) {
      let index = scope.$index;
      this.table_list.splice(index, 1);
    },
    closed() {
      this.form.goods_spu_id = "";
      this.form.name = null;
      this.form.price = null;
      this.sendTime = [];
      this.table_list = [];
    },
    handleEstimate() {
      if (this.sendTime.length == 0) {
        return this.$message.error("请选择配送日期");
      }
      let send_start_time = this.sendTime ? this.sendTime[0] : "";
      let send_end_time = this.sendTime ? this.sendTime[1] : "";
      let list = JSON.parse(JSON.stringify(this.table_list));

      this.btn_loading = true;
      let data = Object.assign(
        {},
        { send_start_time, send_end_time, list: JSON.stringify(list) }
      );
      order_saveCost(data).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("校对成功");
          this.settFormVisible = false;
        } else {
          this.$message.error(res.errmsg);
        }
        this.btn_loading = false;
      });
    },
  },
  mounted() {},
};
</script>
<style lang='scss' scoped>
// 成本校对
.dialog_container {
  .middle {
    display: flex;
    align-items: flex-start;
    overflow: auto;
  }
  .main_table {
    min-height: 250px;
  }
}
/deep/ .el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
  color: #fff;
  background-color: #a0cfff;
  border-color: #a0cfff;
}
</style>
